<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" title="驳回原因" :close-on-click-modal="false" :close-on-press-escape="false">
    <div v-for="item,index in selectionList" :key="index">
      <div class="detaill_title first">第{{index+1}}件商品</div>
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="商品ID">{{item.id}}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{item.title}}</el-descriptions-item>
        <el-descriptions-item label="商品图片">
          <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="item.image" fit="cover"></ImagePreview>
        </el-descriptions-item>
        <el-descriptions-item label="价格">{{item.price}}</el-descriptions-item>
        <el-descriptions-item label="用户照片凭证" :span="2">
          <ImagePreview width="100px" height="100px" noneType="暂无图片" v-for="item,index in item.saleImages" :key="index" :src="item" fit="cover"></ImagePreview>
        </el-descriptions-item>
        <el-descriptions-item label="用户问题描述" :span="2">
          {{item.orderSales ? item.orderSales.content : ''}}
        </el-descriptions-item>
        <el-descriptions-item label="驳回原因" :span="4">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :maxlength="30" placeholder="请输入内容" show-word-limit v-model="item.orderSales.shenContent">
          </el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template slot="footer">
      <div class="flex_item">
        <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  dicts: ['jieke_ordersales_status'],
  data() {
    return {
      visible: false, //弹窗是否显示
      confirmLoading: false, //确认按钮loading
      selectionList: [], //选中的驳回商品列表
    }
  },
  components: {
  },
  methods: {
    init() {
      this.selectionList.map((item) => {
        item.saleImages = item.orderSales ? item.orderSales.images.split(',') : ''
      })
      this.visible = true
       this.confirmLoading = false
    },

    // 表单提交
    formSubmitHandle: debounce(function () {
      let value = this.selectionList.every((cur,index,arr)=>{
        return cur.orderSales.shenContent
      })
      if(!value){
        this.$modal.msgError("请填写每个商品的驳回原因");
        return
      }
      this.confirmLoading = true
      this.visible = false
      this.$emit('refreshSelectionList',this.selectionList)
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
.detaill_title {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
  &.first {
    margin-top: 0;
  }
  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #1890ff;
    border-radius: 2px;
    margin-right: 10px;
    position: relative;
    top: 3px;
  }
}
</style>
